<template>
  <view class="image-bg"  :style="[swiperHeight]">
    <swiper  
      :autoplay="autoplay"
      :interval="interval"  
      :duration="duration"  
      @change="handleChange"  
      :current="current"  
      :disabled="disabled"  
      circular  
      style="width: 100%; height: 100%;" 
      >  
        <swiper-item v-for="(item, index) in items" :key="index">  
          <image :src="item" class="slide-image"  mode="widthFix"  />  
        </swiper-item>  
      </swiper>
	  <view class="w-full flex-center absolute left-0 bottom-54rpx z-20" v-if="items.length > 1 && showDot">
	      <block v-for="(_, index) in items" :key="index">
	          <view class="dot_item h-4 rd-2rpx" :style="{ 'background-color': currents == index ? '#fff' : 'rgba(255,255,255,0.4)', width: dotWidth + 'rpx' }"></view>
	      </block>
	  </view>
    </view>  
  </template>  
    
  <script>  
  export default {  
    props: {  
      items: {  
        type: Array,  
        required: true,  
      },  
      autoplay: {  
        type: Boolean,  
        default: false,  
      },  
      interval: {  
        type: Number,  
        default: 3000,  
      },  
      duration: {  
        type: Number,  
        default: 500,  
      },  
      current: {  
        type: Number,  
        default: 0,  
      },  
      disabled: {  
        type: Boolean,  
        default: false,  
      },  
      carouselIndex: {  
        type: Number,  
        required: true,  
      },  
      activeCarouselIndex: {  
        type: Number,  
        default: null,  
      },
      autoHeight: {
          type: Number,
          default: 0
      },
	  showDot: {
	      type: Number,
	      default: 1
	  },
    },
    data() {  
      return {
        imgHeight:750,
		currents: 0,
      };  
    },  
    methods: {  
      handleChange(event) {
        this.$emit('change', this.carouselIndex);  
		this.$set(this, 'currents', event.detail.current);
      },  
    },  
    watch: {  
      activeCarouselIndex(newVal) {  
        if (newVal !== this.carouselIndex) {  
          this.localAutoplay = false;  
        } else {  
          this.localAutoplay = true;  
        }  
      },  
    },
    computed: {
        dotWidth() {
            let windowWidth = uni.getSystemInfoSync().windowWidth;
            return (windowWidth * 2 - (40 + (this.items.length - 1) * 12)) / this.items.length;
        },
        swiperHeight() {
            let windowWidth = uni.getSystemInfoSync().windowWidth;
            let that = this;

            uni.getImageInfo({
                src: this.items[0],
                success: (image) => {
                    if(image.width/image.height != 1){
                      that.imgHeight = (image.height * windowWidth / image.width) * 2;
                    } else {
                      that.imgHeight =750;
                    }
                }
            });
            return {
                height: `${this.imgHeight}rpx`
            };
			// return {
			//     height: `1000rpx`
			// };
        }
    },
  };  
  </script>  
    
  <style>
  .image-bg{
    width:100%;
    border-radius:24rpx 24rpx 0 0;
    height: 100%;
    /* height: 710rpx; */
    position: relative;
  }
  .image-bg swiper {  
    width: 100%;  
    height: 100%;
    position: relative; 
  }
  .image-bg .slide-image {
    width: 100%;
    height: 100% !important;
    border-radius:24rpx 24rpx 0 0;
	
  }
  .swiper-item {  
    width: 100%; /* swiper-item宽度为100%，确保每张图片占据整个swiper宽度 */  
  }
  
  .dot_item ~ .dot_item {
      margin-left: 12rpx;
  }
  </style>